import React from "react";
//noinspection JSUnresolvedVariable
import {Chart, Geom, Axis, Tooltip, Legend, Coord, Guide, Label, setTheme} from "bizcharts";
import {Row, Col, Button} from "antd";
import { Pie, Gauge} from "ant-design-pro/lib/Charts";
import Pie1 from "../../components/Charts/Pie1";
import Pie2 from "../../components/Charts/Pie2";
import Pie3 from "../../components/Charts/Pie3";
import Gauge1 from "../../components/Charts/Gauge1";
import LineChart1 from "../../components/Charts/LineChart1";
import mstyles  from "./DataPanel.less";
import {ICNumber,ICCard }from '../../components/ic-item'
import styles from '../../index.less'
import {connect} from 'dva';
import cs from 'classnames'
// 数据源
const data = [
    {item: '事例一', count: 40},
    {item: '事例二', count: 21},
    {item: '事例三', count: 17},
    {item: '事例四', count: 13},
    {item: '事例五', count: 9}
];

@connect()
export default class DataPanel extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            isFullScreen:false
        };
    }
    isFullScreen() {
        return (document.body.scrollHeight == window.screen.height && document.body.scrollWidth == window.screen.width);
    }

    toggleFullScreen() {
        const {isFullScreen}=this.state;
        if (isFullScreen) {
            this.exitFull();
            this.setState({isFullScreen: false})
        } else {
            this.requestFullScreen();
            this.setState({isFullScreen: true})
        }

    }

    requestFullScreen() {
        var element = document.body;
        // 判断各种浏览器，找到正确的方法
        var requestMethod = element.requestFullScreen || //W3C
            element.webkitRequestFullScreen ||    //Chrome等
            element.mozRequestFullScreen || //FireFox
            element.msRequestFullScreen; //IE11
        if (requestMethod) {
            requestMethod.call(element);
        }
        else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
        this.onCollapsed(true);
    }
    onCollapsed(status){
        this.props.dispatch({
            type: 'global/changeLayoutCollapsed',
            payload: status,
        });
    }

    exitFull() {
        var exitMethod = document.exitFullscreen || //W3C
            document.mozCancelFullScreen ||    //Chrome等
            document.webkitExitFullscreen || //FireFox
            document.webkitExitFullscreen; //IE11
        if (exitMethod) {
            exitMethod.call(document);
        }
        else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
        this.onCollapsed(false);
    }
    col1(){
        return (
            <Col span={6}>
                <Row>
                    <ICCard title="工程状态">
                        <Row gutter={0}>
                            <Col span={12}>
                                <Pie1 data={data} title="主机"></Pie1>
                            </Col>
                            <Col span={12}>
                                <Pie1 data={data} title="改造"></Pie1>
                            </Col>
                        </Row>
                    </ICCard>
                </Row>
                <Row>
                    <ICCard title="竣工评价">
                        <Pie2 data={data}></Pie2>
                    </ICCard>
                </Row>
                <Row>
                    <ICCard title="发布分类">
                        <Pie3 data={data}></Pie3>
                    </ICCard>
                </Row>
                <Row>
                    <ICCard title="上刊率">
                        <Row>
                            <Col span={8}>
                                <Pie percent={28} subTitle="灯箱" total="28%" height={100}
                                     margin={[3]} color="#CA9F21"/>
                            </Col>
                            <Col span={8}>
                                <Pie percent={28} subTitle="LED" total="28%" height={100}
                                     margin={[3]} color="#ACCDE8"/>
                            </Col>
                            <Col span={8}>
                                <Pie percent={28} subTitle="液晶" total="28%" height={100}
                                     margin={[3]} color="#669049"/>
                            </Col>
                        </Row>
                    </ICCard>
                </Row>
            </Col>
        )

    }

    col2(){
        return(
            <Col span={6}>
                <Row>
                    <ICCard title="销售额统计">
                        <Row>
                            <Col span={12}>
                                <div className="text-center">年计划销售额</div>
                                <div className="text-center">
                                    <ICNumber number={123} len={4}></ICNumber>
                                </div>
                            </Col>
                            <Col span={12}>
                                <div className="text-center">年累计销售额</div>
                                <div className="text-center">
                                    <ICNumber number={123} len={6}></ICNumber>
                                </div>
                            </Col>
                        </Row>
                    </ICCard>
                </Row>
                <Row>
                    <ICCard title="市场类别">
                        <Pie2 data={data}></Pie2>
                    </ICCard>
                </Row>
            </Col>
        )
    }

    col3(){
        return(
            <Col span={6}>

            </Col>
        )
    }

    col4(){
        return(
            <Col span={6}>
                <Row>
                    <Col span={24}>

                        <ICCard title="用电量统计">
                            <Row>
                                <Col span={12}>
                                    <div className="text-center">当前数量(KW)</div>
                                    <div className="text-center">
                                        <ICNumber number={123} len={4}></ICNumber>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div className="text-center">累计数量(KW)</div>
                                    <div className="text-center">
                                        <ICNumber number={123} len={6}></ICNumber>
                                    </div>
                                </Col>
                            </Row>
                        </ICCard>
                    </Col>

                </Row>
                <Row>
                    <ICCard title="用电量KPI">
                        <Row>
                            <Col span={24}>
                                <Gauge1
                                    title="平均值(KW)"
                                    height={100}
                                    percent={87}
                                />
                            </Col>
                            {/*<Col span={12}>*/}
                            {/*<Gauge*/}
                            {/*title="耗电率(％)"*/}
                            {/*height={100}*/}
                            {/*percent={87}*/}
                            {/*/>*/}
                            {/*</Col>*/}
                        </Row>
                    </ICCard>

                </Row>
                <Row>
                    <ICCard title="用电量趋势">
                        <LineChart1 height={100}></LineChart1>
                    </ICCard>
                </Row>
                <Row>

                </Row>
            </Col>
        )
    }
    render() {
        const {isFullScreen}=this.state;
        return (
            <div>
                <div className="expandRow">
                    <Button className="btn" icon={isFullScreen ? 'shrink' : 'arrows-alt'}
                            onClick={() => this.toggleFullScreen()}></Button>
                </div>
                <div className={cs(styles.pageContent,mstyles.bg)} >
                    <Row gutter={10}>
                        {this.col1()}
                        {this.col2()}
                        {this.col3()}
                        {this.col4()}


                    </Row>
                </div>
            </div>
        )
    }
}